<script setup lang="ts">
import HeaderNav from '@/components/common/HeaderNav.vue';
</script>

<template>
    <div class="box">
        <HeaderNav />
        <div class="main">
            <div class="content">

            </div>
            <router-view v-slot="{ Component }">
                <transition name="router_animate">
                    <component :is="Component" />
                </transition>
            </router-view>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box {
    height: auto;
    width: 100%;
    margin: 0 0;

    .main {
        // height: 100%;
        width: 100%;
        margin: 0 0;
        background-color: #d7d8ce;

        .content {
            height: 80%;
        }
    }
}


.router_animate-enter-active {
    animation: backInDown 1s;
}

.router_animate-leave-active {
    animation: backOutDown 0.6s;
}
</style>
